{% extends '::layout.html.twig' %}

{% block title %}Ecrire une lettre{% endblock %}

{% block js %}	
	<link rel="stylesheet" type="text/css" href="{{ asset('bundles/lettralletter/js/cleditor/jquery.cleditor.css') }}" />
    <script type="text/javascript" src="{{ asset('bundles/lettralletter/js/cleditor/jquery.cleditor.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/lettralletter/js/cleditor/jquery.cleditor.latex.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery.validate.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/lettralletter/js/jquery.letter.js') }}"></script>
{% endblock %}

{% block content %}

<style>
	.ui-button { margin-left: -1px; height:16px; padding:2px;}
	.ui-button-icon-only .ui-button-text { padding: 0.35em; } 
	.ui-autocomplete-input { margin: 0; padding: 2px; width:75%; }     
</style>

<div class="form" id="letter">

    <div class="clr"></div>
    
    <div id="steps">
	    <ul id="steps">
	    	<li id="step1" class="current">Etape 1<span>Expéditeur</span></li>
	    	<li id="step2">Etape 2<span>Destinataire</span></li>
	    	<li id="step3">Etape 3<span>En-tête</span></li>
	    	<li id="step4">Etape 4<span>Contenu</span></li>
	    	<li id="step5">Etape 5<span>Résultat</span></li>
	    </ul>
    </div>
    

    	<div id="step1">   
<!-- 	        <p> -->
<!-- 	        	Les informations suivantes proviennent de votre profil que vous avez renseigné à l'inscription.<br /> -->
<!-- 	            Si vous les modifiez, elles seront mises à jour dans votre profil. -->
<!-- 	        </p> -->
	        <br />
	        <fieldset class="small">
	            <legend>Expéditeur</legend>
	            <form id="lettral_user_personnalProfile" method="POST" novalidate class="top">	            	            
	            	{{ form_label(profileForm.civilite) }} <span class="error"></span> {{ form_widget(profileForm.civilite) }}
		            {{ form_label(profileForm.nom) }} <span class="error"></span> {{ form_widget(profileForm.nom) }}
		            {{ form_label(profileForm.prenom) }} <span class="error"></span> {{ form_widget(profileForm.prenom) }}
		            {{ form_label(profileForm.adresse) }} <span class="error"></span> {{ form_widget(profileForm.adresse) }}
		            {{ form_label(profileForm.comp) }} <span>(optionnel)</span> {{ form_widget(profileForm.comp) }}
		            {{ form_label(profileForm.cp) }} <span class="error"></span> {{ form_widget(profileForm.cp) }}
		            {{ form_label(profileForm.ville) }} <span class="error"></span> {{ form_widget(profileForm.ville) }}
		            {{ form_label(profileForm.fixe) }} <span>(optionnel)</span><span class="error"></span> {{ form_widget(profileForm.fixe) }}
		            {{ form_label(profileForm.port) }} <span>(optionnel)</span><span class="error"></span> {{ form_widget(profileForm.port) }}
		            {{ form_label(profileForm.displayEmail) }} <span>(optionnel)</span><span class="error"></span> {{ form_widget(profileForm.displayEmail) }}
	            </form>
	        </fieldset>
	        <div class="buttons">
	        	<button class='nextStep' rel='2'>Suivant</button>
	        </div>
	    </div>

	<form id="letter_add" method="POST" action="{% if numLetter is null %}{{ path('letter_letter_add') }}{% else %}{{ path('letter_letter_edit', { 'numLetter' : numLetter }) }}{% endif %}" novalidate class="top">
	    <div id="step2" style="display: none;">
	        <fieldset class="small">
	            <legend>Destinataire</legend>
	            {{ form_label(form.nomDest) }} <span class="error"></span> {{ form_widget(form.nomDest) }}
	            {{ form_label(form.compNomDest1) }} <span>(optionnel)</span> {{ form_widget(form.compNomDest1) }}
	            {{ form_label(form.compNomDest2) }} <span>(optionnel)</span> {{ form_widget(form.compNomDest2) }}
	            {{ form_label(form.adresseDest) }} <span>(optionnel)</span> {{ form_widget(form.adresseDest) }}
	            {{ form_label(form.cpDest) }} <span>(optionnel)</span>&nbsp;&nbsp;<span class="error"></span> {{ form_widget(form.cpDest) }}
	            {{ form_label(form.villeDest) }} <span>(optionnel)</span> {{ form_widget(form.villeDest) }}
	        </fieldset>
	        <div class="buttons">
	        	<button class='prevStep' rel='1' tabindex="2">Précédent</button>
	        	<button class='nextStep' rel='3' tabindex="1">Suivant</button>
	        </div>
	    </div>
	    
	    <div id="step3" style="display: none;">
	        <fieldset class="small">
	        <legend>En-tête</legend>     
	            {{ form_label(form.sujet) }} <span class="error"></span> {{ form_widget(form.sujet) }}	
	            {{ form_label(form.lieuEcriture) }} <span class="error"></span> {{ form_widget(form.lieuEcriture) }}
	            {{ form_label(form.dateEcriture) }} <span class="error"></span>
  ​				<input type='date' id="letter_add_dateEcriture" name="letter_add[dateEcriture]"><br />
				{{ form_label(form.vref) }} <span class="error"></span> {{ form_widget(form.vref) }}
				{{ form_label(form.nref) }} <span class="error"></span> {{ form_widget(form.nref) }}
	        </fieldset>
	        <div class="buttons">
	        	<button class='prevStep' rel='2' tabindex="2">Précédent</button>
	        	<button class='nextStep' rel='4' tabindex="1">Suivant</button>
	        </div>
        </div>
        
	    <div id="step4" style="display: none;">
	        <fieldset class="large">
	        <legend>Contenu</legend>       
	            {{ form_label(form.ouv) }} <span class='help'><a id='ouv'>Cliquez ici pour voir des exemples</a></span>&nbsp;&nbsp;<span class="error"></span> {{ form_widget(form.ouv) }}				
	            {{ form_label(form.contenu) }} <span class="error" id="letter_add_contenu"></span> {{ form_widget(form.contenu) }}
	            {{ form_label(form.ferm) }} <span class='help'><a id='ferm'>Cliquez ici pour voir des exemples</a></span>&nbsp;&nbsp;<span class="error"></span> {{ form_widget(form.ferm) }}
				{{ form_label(form.sign) }} <span></span> {{ form_widget(form.sign) }}
				<div rel="1" class="pj">{{ form_label(form.pj1) }} <span>(optionnel)</span> {{ form_widget(form.pj1) }} <img src={{ asset('bundles/lettralletter/images/add.png') }} class="add"></div>
				<div rel="2" class="pj" style="display:none">{{ form_label(form.pj2) }} <span>(optionnel)</span> {{ form_widget(form.pj2) }} <img src={{ asset('bundles/lettralletter/images/add.png') }} class="add"><img src={{ asset('bundles/lettralletter/images/delete.png') }} class="delete"></div>
				<div rel="3" class="pj" style="display:none">{{ form_label(form.pj3) }} <span>(optionnel)</span> {{ form_widget(form.pj3) }} <img src={{ asset('bundles/lettralletter/images/delete.png') }} class="delete"></div>        
	        </fieldset>
	        <div class="buttons">
	        	<button class='prevStep' rel='3'  tabindex="2">Précédent</button>
	        	<button class='nextStep' id='save' rel='5' tabindex="1" title="Enregistrer comme brouillon">Enregistrer</button>
	        	<button class='nextStep' id='generate' rel='5' tabindex="1" title="Générer en PDF">Générer</button>
	        </div>
        </div>  
        
        <div id="step5" style="display: none;">
	        <fieldset class="small">
	        <legend>Résultat</legend>     
	        	<div id="success" style="display: none;">
	        		<div id="success_notice">
	        			La lettre a été générée avec succès !
	        		</div>
	        		<div class='clr'></div>
	        		<div id="content">
	        			<p class="choice"><span id="question">Que souhaitez-vous faire ?</span></p>
	        			<p class="choice"><a id="show" href="{{ path('letter_letter_showPdf') }}">Afficher dans le navigateur</a></p>
	        			<p class="choice"><a id="download" href="{{ path('letter_letter_download') }}">Télécharger en PDF</a></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
	        			<p class="choice"><a href="">Envoyer la lettre par mail</a></p>
	        			<p class="choice"><a href="">Envoyer la lettre avec LaPoste</a></p>
	        		</div>
	        	</div>
	        	<div id="error" style="display: none;">
	        		<div id="content">
	        			<p><span id="question">Une erreur est survenue.</span></p>
	        		</div>
	        	</div>
	        </fieldset>
	        <div class="buttons">
	        	<button class='prevStep' rel='4' tabindex="2">Précédent</button>
	        </div>
        </div>

    </form>
</div>

{% endblock %}
